Laravel 實戰經驗分享 - Day13 初探 Laravel - View - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 12 屆 iThome 鐵人賽

DAY 13

自我挑戰組

Laravel 實戰經驗分享系列第 13 篇

Laravel 實戰經驗分享 - Day13 初探 Laravel - View

12th鐵人賽

leopan

2020-09-28 20:45:05

1333 瀏覽

分享至

今天要講的題目是我比較不擅長的 View，其實在 Laravel 中，View 本身就是屬於前端設計的範疇，我在這一年的工作都是以後端為主，其實前端的開發已經沒有那麼嫻熟了，加上公司目前走前後端的分離，我只要專注開發 API，因此我在寫本篇的時候可能會有錯誤，或是無法寫得太過深入，也麻煩大家可以指教囉！

Blade 模板

Laravel 是使用 Blade 模板進行前端渲染，由於過往寫純 PHP 時，會將 PHP 語法以及程式邏輯直接寫在 HTML&CSS 內，甚至會把 SQL 語法也寫進去，這樣容易造成後續維護上的麻煩，因此 Laravel 以模板引擎作為解法，雖仍不比前後段分離簡潔，但是也大幅降低了原本寫 Server Side Render 的麻煩。

建立 View

首先，我們在 resources/views 內新增一個新的模板 hello.blade.php。

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello</title>
</head>
<body>
    <h1>Hello, it is my first Blade template.</h1>
</body>
</html>

透過 Route 在 Controller 內回傳

Route

Route::get('hello',  [HelloController::class, 'show']);

Controller

public function show(){
    return view('hello');
}

也可傳遞參數。

Route

Route::get('hello','HelloController@showName');

Controller

public function showName(){
   return view('hello')->with('name',$name);
}

原本的模板就可以接收這個傳過來的參數，Blade 是使用 {{}}。

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello</title>
</head>
<body>
    <h1>Hello, my name is {{ $name }}.</h1>
</body>
</html>

這樣就是這個 View 的基本用法囉！
不過 Blade 有很多花俏的用法，例如可以自訂 Layouts，不用再重複造輪子，但篇幅有限，加上自己還沒有辦法那麼快的理解完所有用法，這邊就先不放來獻醜了，那我們明天見囉！